<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="xmb" uri="http://xmb.suishoupai.com/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>订单列表</title>
    <jsp:include page="common/common_css.jsp"/>
    <style>
        .border-left {
            border-left: 1px solid rgba(34, 36, 38, .1) !important;
        }
    </style>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <jsp:include page="common/message.jsp"/>
    <div class="ui pointing secondary menu">
        <a href="${pageContext.request.contextPath}/sale/orders" class="item ${status==2?'active':''}" data-tab="first">代发货</a>
        <a href="${pageContext.request.contextPath}/sale/orders?status=3" class="item ${status==3?'active':''}"
           data-tab="second">已完成</a>
    </div>
    <div class="ui tab segment active" data-tab="${status==2?'first':'second'}">
        <table class="ui celled padded table">
            <thead>
            <tr>
                <th class="center aligned">订单id</th>
                <th class="center aligned">下单用户</th>
                <th class="center aligned">收货地址</th>
                <th class="center aligned">下单时间</th>
                <th class="center aligned">商品id</th>
                <th class="center aligned">商品名字</th>
                <th class="center aligned">购买数量</th>
                <th class="center aligned">状态</th>
            </tr>
            </thead>
            <tbody>
            <c:choose>
                <c:when test="${fn:length(ordersList.list) > 0}">
                    <c:forEach items="${ordersList.list}" var="item">
                        <tr data-id="${item.orders.id}">
                        <td rowspan="${fn:length(item.goodsSnapshots)}"
                            class="center aligned">${item.orders.id}
                        </td>
                        <td rowspan="${fn:length(item.goodsSnapshots)}"
                            class="center aligned">
                                ${item.userBuy.name}
                        </td>
                        <td rowspan="${fn:length(item.goodsSnapshots)}"
                            class="center aligned">
                                ${item.orders.contact}
                            <br>
                                ${item.orders.address}
                        </td>
                        <td rowspan="${fn:length(item.goodsSnapshots)}" class="center aligned">
                            <xmb:formatDate value="${item.orders.createTime}"/>
                        </td>
                        <c:set var="i" scope="session" value="0"/>
                        <c:forEach items="${item.goodsSnapshots}" var="goodsSnapshot">
                            <c:if test="${i>0}"><tr></c:if>
                            <td class="center aligned ${i>0?'border-left':''}">${goodsSnapshot.goodsId}</td>
                            <td class="center aligned">${goodsSnapshot.name}</td>
                            <td class="center aligned">${goodsSnapshot.count}</td>
                            <c:if test="${fn:length(item.goodsSnapshots)>1&&i==0}">
                                <td rowspan="${fn:length(item.goodsSnapshots)}" class="center aligned">
                                    <c:choose>
                                        <c:when test="${status==2}">
                                            <div class="ui simple dropdown large label">
                                                <div>
                                                    <label>
                                                        代发货
                                                    </label>
                                                    <i class="dropdown icon"></i>
                                                </div>
                                                <div class="menu">
                                                    <div class="item JS-status">
                                                        <label>已发货</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:when>
                                        <c:when test="${status==3}">
                                            已完成
                                        </c:when>
                                        <c:otherwise>
                                            不认识的status
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                </tr>
                            </c:if>
                            <c:if test="${i>0}"></tr></c:if>
                            <c:set var="i" scope="session" value="${i+1}"/>
                        </c:forEach>
                        <c:if test="${fn:length(item.goodsSnapshots)==1}">
                            <td rowspan="${fn:length(item.goodsSnapshots)}" class="center aligned">
                                <c:choose>
                                    <c:when test="${status==2}">
                                        <div class="ui simple dropdown large label">
                                            <div>
                                                <label>
                                                    代发货
                                                </label>
                                                <i class="dropdown icon"></i>
                                            </div>
                                            <div class="menu">
                                                <div class="item JS-status">
                                                    <label>已发货</label>
                                                </div>
                                            </div>
                                        </div>
                                    </c:when>
                                    <c:when test="${status==3}">
                                        已完成
                                    </c:when>
                                    <c:otherwise>
                                        不认识的status
                                    </c:otherwise>
                                </c:choose>
                            </td>
                        </c:if>
                        </tr>
                    </c:forEach>
                </c:when>
                <c:otherwise>
                    <tr>
                        <td class="center aligned" colspan="8">没有相关订单</td>
                    </tr>
                </c:otherwise>
            </c:choose>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="8" class="center aligned">
                    <c:set var="pagination" scope="session" value="${ordersList}"/>
                    <c:set var="paginationAction" scope="session" value="sale/orders"/>
                    <jsp:include page="common/page.jsp"/>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<!--确认弹窗-->
<div id="JS-modal-confirm" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div id="JS-modal-confirm-title" style="display: inline-block;color: black;margin-bottom: 50px;">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        $('.JS-status').click(function () {
            var id = $(this).parent().parent().parent().parent().data("id");
            $('#JS-modal-confirm-title').text("订单'" + id + "'确定已完成发货了吗？");
            $('#JS-modal-confirm').modal({
                closable: false, allowMultiple: true, observeChanges: true,
                onApprove: function () {
                    if ($('#JS-modal-confirm .approve.button').hasClass('loading')) {
                        return false;
                    }
                    $('#JS-modal-confirm .approve.button').addClass('loading');
                    common.ajax({
                        url: ROOT + "/sale/orders/" + id,
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            window.location.reload();
                        },
                        complete: function () {
                            $('#JS-modal-confirm .approve.button').removeClass('loading');
                        }
                    });
                    return false;
                },
                onDeny: function () {
                    return !$('#JS-modal-confirm .approve.button').hasClass('loading');
                }
            }).modal("show");
        });
    });
</script>
</body>
</html>
